<template>
  <div class="search-popup">
    <van-search
      v-model="searchval"
      show-action
      :placeholder="placeholder"
      @search="onSearch"
      @input="onInput"
      @cancel="onCancel"
    />

    <HistoryHot
      v-if="blockShow == 1"
      :hotKeywordList="hotKeywordList"
      :historyKeywordList="historyKeywordList"
    />
    <SearchTipsList v-else-if="blockShow == 2" :searchTipsArr="searchTipsArr" />
    <SearchProducts
      v-else-if="blockShow == 3"
      :goodsList="goodsList"
      :filterCategory="filterCategory"
    />
  </div>
</template>

<script>
import { GetHishotData, GetSeTipsData, GetGoodsListData } from "@/request/api";
import HistoryHot from "@/components/search/HistoryHot";
import SearchProducts from "@/components/search/SearchProducts";
import SearchTipsList from "@/components/search/SearchTipsList ";
import { mapMutations } from "vuex";
export default {
  components: {
    HistoryHot,
    SearchProducts,
    SearchTipsList,
  },
  data() {
    return {
      //用户输入的值
      searchval: "",

      //搜索框提示词
      placeholder: "",

      //blockShow变量用来控制切换搜索页面的展示
      blockShow: 1,

      //历史记录和热门搜索标签
      hotKeywordList: [],
      historyKeywordList: [],
      //搜索提示列表的数据
      searchTipsArr: [],
      //搜索商品列表数据
      goodsList: [],
      //产品列表分类数据
      filterCategory: [],
    };
  },
  created() {
    GetHishotData().then((res) => {
      let { defaultKeyword, hotKeywordList, historyKeywordList } = res.data;
      this.placeholder = defaultKeyword.keyword;
      this.hotKeywordList = hotKeywordList;
      this.historyKeywordList = historyKeywordList;
    });
  },
  methods: {
    ...mapMutations({ chenIsshow: "isshow/chenIsshow" }),
    onSearch(val) {
      this.blockShow = 3;
      //发起搜索请求
      GetGoodsListData({ keyword: val }).then((res) => {
        console.log(res.data);
        let { data, filterCategory } = res.data;
        this.goodsList = data;
        // this.filterCategory =filterCategory;
        let newArr = filterCategory.map((item) => {
          return { text: item.name, value: item.id, checked: item.checked };
        });
        this.filterCategory = newArr;
      });
    },
    onInput(val) {
      this.blockShow = 2;
      GetSeTipsData({ keyword: val }).then((res) => {
        console.log(res.data);
        this.searchTipsArr = res.data;
      });
    },
    onCancel() {
      this.$router.go(-1);
      this.chenIsshow(false);
    },
  },
};
</script>
 
<style lang = "less" scoped>
.search-popup {
  width: 100%;
  height: 100%;
  position: absolute;
  right: 0;
  top: 0;
  z-index: 99;
  background-color: #efefef;
}
</style>